<script setup lang="ts">
import { ref, unref, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  schema: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

const colorVal = ref(props.modelValue);

watch(
  () => props.modelValue,
  (val) => {
    console.log(1321132312);
    if (val === unref(colorVal)) return;
    colorVal.value = val;
  }
);

watch(
  () => colorVal.value,
  () => {
    console.log(1321132312);
    emit("change", colorVal.value);
  }
);
</script>

<template>
  <span
    :style="{
      display: 'inline-block',
      width: '20px',
      height: '20px',
      backgroundColor: colorVal,
    }"
  ></span>
</template>

<style lang="less" scoped></style>
